<template>
  <div class="address-item" :class="{ 'is-default': isDefault }">
    <div class="left">
      <span class="text">
        <b>{{ info.city.province }}, {{ info.city.city }}, {{ info.city.area }}</b>
        <b class="desc">{{ info.address }}</b>
      </span>
      <span class="mobile">
        收件人:
        <b>{{ info.nickname }}</b>
      </span>
      <span class="mobile">
        手机号码:
        <b>{{ info.mobile }}</b>
      </span>
    </div>
    <i class="cubeic-delete" @click="clickDelete"></i>
    <div class="right">
      <cube-switch v-model="isDefault" @input="changeDefault" />
      <cube-button inline primary class="edit" @click="$router.push('/service/address-edit/' + info.id)">编辑地址</cube-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddressItem',
  props: ['info'],
  computed: {
    isDefault: {
      get() {
        return this.info.is_default === '1'
      },
      set(value) {
        this.info.is_default = value ? '1' : '0'
      }
    }
  },
  methods: {
    changeDefault() {
      this.$emit('changeDefault', [this.info.id, this.isDefault ? '1' : '0'])
    },
    clickDelete() {
      this.$createDialog({
        type: 'confirm',
        title: '您确定要删除这个地址吗吗',
        onConfirm: () => { this.$emit('removeAddress', this.info.id) }
      }).show()
    }
  }
}
</script>

<style scoped lang="stylus">
.address-item
  margin-top 10px
  height 90px
  line-height 15px
  padding 10px
  display flex
  background white
  border-radius 5px
  &.is-default
    border 1px solid $main_color
  .left
    flex 1
    text-align left
    span
      display block
      &.text
        height 50px
        b
          font-weight 700
          display block
          height 20px
          &.desc
            height 30px
            font-weight normal
            color rgba(0, 0, 0, 0.7)
            overflow hidden
      //background red
      //text-overflow ellipsis
      &.mobile
        height 20px
        line-height 20px
        b
          font-style normal
          color $main_color
  i
    width 60px
    font-size 30px
    color $main_color
    margin-top 30px
  .right
    width 50px
    padding-top 20px
    position relative
    //background red
    .edit
      position absolute
      bottom 0
      right 2px
      height 20px
      line-height 5px
      padding 0 5px
      border-radius 5px
</style>
